<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SOP设置</title>
    <link rel="stylesheet" href="../../dutySchedule/css/H-ui.min.css">
    <link rel="stylesheet" href="../../dutySchedule/css/bootstrap.min.css">
    <style>
        input:disabled{
            border: 1px solid #DDD;
            background-color: white;
            color:#ACA899;
        }
    </style>
</head>
<body>
<div style="float: left;text-align:center;width: 20%;height: 600px;overflow-y:auto;background-color: #B3B3B3">
    <div style="margin-top: 20px;">
        <input type="text" disabled value="完整流程" style="height: 35px;width: 150px;opacity:1;color:black;cursor: pointer" class="input-text radius size-S text-c"
               id="drag1" draggable="true" ondragstart="startDrag(event) ">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="完整流程" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="完整流程" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="完整流程" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="完整流程" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="完整流程" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
 
</div>
<div id="div2" ondrop="s_drop(event)" ondragover="s_allowDrop(event)" style="float: left;width: 60%;height:600px;border-right: 1px dashed;border-left: 1px dashed;">

</div>
<div style="float: left;width: 20%;text-align:center;">
    <div style="margin-top: 20px;">
        <input type="text" disabled value="属性一" style="height: 35px;width: 150px;opacity:1;color:black;cursor: pointer" class="input-text radius size-S text-c"
               id="drag2" draggable="true" ondragstart="startDrag(event) ">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="属性二" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="属性三" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="属性四" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="属性五" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>
    <div style="margin-top: 20px;">
        <input type="text" disabled value="属性六" style="height: 35px;width: 150px;opacity:1;color:black" class="input-text radius size-S text-c">
    </div>

</div>
<script type="text/javascript" src="../../dutySchedule/js/jquery.min.js"></script>
<script type="text/javascript">
    function s_allowDrop(ev) {
        ev.preventDefault();
    }
    function startDrag(event) {
        event.dataTransfer.setData("Text", event.target.id);
    }
    //uuid
    function getUuid(){
        var len=32;//32长度
        var radix=16;//16进制
        var chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');var uuid=[],i;radix=radix||chars.length;if(len){for(i=0;i<len;i++)uuid[i]=chars[0|Math.random()*radix];}else{var r;uuid[8]=uuid[13]=uuid[18]=uuid[23]='-';uuid[14]='4';for(i=0;i<36;i++){if(!uuid[i]){r=0|Math.random()*16;uuid[i]=chars[(i==19)?(r&0x3)|0x8:r];}}}
        return uuid.join('');
    }
    function mouseUp(event){
        /*e=e? e:window.event;
         var weizhiX = e.screenX;
         var weizhiY = e.screenY;*/
        debugger
        //document.onmouseup=handleMouseUp;
        var x=event.screenX;
        var y=event.screenY;
        console.log(x,y);
    }

    function s_drop(event) {
        event.preventDefault();
        //debugger
        var data = event.dataTransfer.getData("Text");
        var x=event.clientX-300;
        var y=event.clientY-30;
        switch (data){
            case "drag1":
                var number = getUuid();
                var juxing = "<div draggable='true'  id='"+number+"' style='background-color:#EAEAEA;position:fixed;border:1px solid gray;width: 100px;height: 60px;margin-left: "+x+"px;"+"margin-top:"+y+"px;"+"  '>"+
                        "<img style='margin-left:5px;float: right' id='"+number+"' src='../images/yichu.png' onclick='removeIt(event)'>"+
                        "</div>";
                $("#div2").append(juxing);
                break;
            case "drag4":
                var weixin="微信名:<input type='text' />" +
                        " 微信号:<input type='text' />" +
                        " <input type='button' value='发送'/>";
                $("#div2").append(weixin);
                break;
            case "drag5":
                var number = getUuid();
                console.log(number);
                var  dianhua="<div draggable='true'  id='"+number+"' style='position:fixed;margin-left: "+x+"px;"+"margin-top:"+y+"px;"+"  '>"+
                        "<span>电话号码：</span>"+
                        "<input type='text' class='input-text size-S' style='width:100px;'/>" +
                        "<span style='margin-left: 10px;'>联系人：</span>"+
                        "<input type='text' class='input-text size-S' style='width:100px;' />" +
                        "<img style='margin-left:5px;' id='"+number+"' src='imgs/yichu.png' onclick='removeIt(event)'>"+
                        "</div>";
                $("#div2").append(dianhua);
                break;
            case "drag6":
                var number =  Math.random();
                var jiantou="<div name='ceshia'>"+
                        "<img name='"+number+" ' style='margin-left:150px;' src='imgs/jiantou.png' onclick='removeArrow(event)'>"+
                        "</div>";
                $("#div2").append(jiantou);
                break;
            case "drag7":
                //var number =  Math.random();
                var div7="<div id='secondDiv' style='width:480px;height: 160px;border: solid 1px grey;' ondrop='s_drop(event)' ondragover='s_allowDrop(event)'>"+
                        "<span>"+"功能点简介"+"</span>"+
                        "</div>";
                $("#div2").append(div7);
                break;
        }
        // var datas = event.target.id;
        // var item = "";
        //item+="<input type='checkbox'>";
        //event.target.appendChild(item);
        //var button = "";
        /*  if(data == "drag4"){
         var weixin="微信名:<input type='text' />" +
         " 微信号:<input type='text' />" +
         " <input type='button' value='发送'/>";
         $("#div2").append(weixin);
         }else{
         var  dianhua="<div draggable='true' id='yichuceshi' name='ceshi' style='margin:10px;'>"+
         "<span>电话号码：</span>"+
         "<input type='text' class='input-text size-S' style='width:100px;'/>" +
         " 联系人:<input type='text' class='input-text size-S' style='width:100px;' />" +
         "<span onclick='removeIt(event)'>X</span>"
         "</div>";
         $("#div2").append(dianhua);
         }*/
        /* switch (data){
         case "drag4":
         var weixin="微信名:<input type='text' />" +
         " 微信号:<input type='text' />" +
         " <input type='button' value='发送'/>";
         $("#div2").append(weixin);
         break;
         case "drag5":
         var number = getUuid();
         console.log(number);
         var  dianhua="<div draggable='true'  id='"+number+"' style='margin:10px;'>"+
         "<span>电话号码：</span>"+
         "<input type='text' class='input-text size-S' style='width:100px;'/>" +
         "<span style='margin-left: 10px;'>联系人：</span>"+
         "<input type='text' class='input-text size-S' style='width:100px;' />" +
         "<img style='margin-left:5px;' id='"+number+"' src='imgs/yichu.png' onclick='removeIt(event)'>"+
         "</div>";
         $("#div2").append(dianhua);
         break;
         case "drag6":
         var number =  Math.random();
         var jiantou="<div name='ceshia'>"+
         "<img name='"+number+" ' style='margin-left:150px;' src='imgs/jiantou.png' onclick='removeArrow(event)'>"+
         "</div>";
         $("#div2").append(jiantou);
         break;
         case "drag7":
         //var number =  Math.random();
         var div7="<div id='secondDiv' style='width:480px;height: 160px;border: solid 1px grey;' ondrop='s_drop(event)' ondragover='s_allowDrop(event)'>"+
         "<span>"+"功能点简介"+"</span>"+
         "</div>";
         $("#div2").append(div7);
         break;
         }*/
        //$("#div2").append(button);
        //return item;
        //console.log(data);
    }


    var faweixin = document.getElementById("drag4");
    // console.log(faweixin);


    //删除指定div
    function removeIt() {
        /* var xx =number;
         console.log(xx);*/
        var data = event.target.id;

        console.log(data);
        //var removeObj = document.getElementById('yichuceshi').getElementsByName('mlt24')[0];
        //removeObj.parentNode.removeChild(removeObj);
        //$('#div2>div[name="ceshi"]').remove();
        //$("#div1").remove();
        debugger
        $("div#"+data+"").remove();
        //$('#div2>div[name= " '+number+'" ]').remove();
        // $('#div2>img[name="xx"]').remove();
        //console.log(number);
        //$("#"+number+"").remove();
    }
    //移除箭头
    function removeArrow(event) {
        var data = event.target.name;
        console.log(data);
        $("#div2").find("img[name='"+data+"']").remove();
        //var removeObj = document.getElementById('yichuceshi').getElementsByName('mlt24')[0];
        //removeObj.parentNode.removeChild(removeObj);
        //$('#div2>div[name="ceshi"]').remove();
        //$("#div1").remove();
        //$('#div2>div[name= " '+data+'" ]').remove();
        // $('#div2>img[name="xx"]').remove();
    }
</script>
</body>
</html>